/*动画样式库*/

.body-enter-active {
    animation: body-in 0.3s;
}

.body-leave-active {
    animation: body-out 0.3s;
}

@keyframes body-in {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

@keyframes body-out {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: -100%;
        opacity: 0;
    }
}

/* 弹窗动画开始 */
.dialog-enter-active {
    animation: dialog-in 0.3s;
}

.dialog-leave-active {
    animation: dialog-out 0.3s;
}

@keyframes dialog-in {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5);
    }

    61.8% {
        opacity: 1;
        transform: scale(1.01, 1.01);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes dialog-out {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    30% {
        opacity: 0.8;
        transform: scale(1.05, 1.05);
    }

    100% {
        opacity: 0;
        transform: scale(0.5, 0.5);
    }
}

@keyframes shake-in {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.01, 1.01);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* 弹窗动画结束 */

/* 高级搜索动画开始 */
.search-enter-active {
    animation: search-in 0.3s;
    transform-origin: 500px 20px;
}

.search-leave-active {
    animation: search-out 0.3s;
    transform-origin: 500px 20px;
}

@keyframes search-in {
    0% {
        opacity: 0;
        transform: scale(0.1, 0.1);
    }

    70% {
        opacity: 0.9;
        transform: scale(1.05, 1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes search-out {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    30% {
        opacity: 0.9;
        transform: scale(1.05, 1.05);
    }

    100% {
        opacity: 0;
        transform: scale(0.1, 0.1);
    }
}

@keyframes jump-in {
    0% {
        transform: translateY(2px);
    }

    70% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

/* 高级搜索动画结束  */

@keyframes tooltip-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.love {
    animation: love 1s linear infinite;
}

@keyframes love {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
